<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>黄金周迁徙</title>
  <!-- 请勿在项目正式环境中引用该 layui.css href="layui.css"地址 -->
  <link rel="stylesheet"  href="{{ url_for('static', filename='layui.css') }}">
    <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
  <style>
      .chart-container{
          width: 1500px;
          height: 500px;
          margin-top: 100px;
      }
      .icon{
          width: 20px;
          display: inline-block;
      }
  </style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
<body>


    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test" style="height:1000px;display: inline-block;">
          <li class="layui-nav-item layui-nav-itemed">
          </li>
          <li class="layui-nav-item ">
          </li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/搜索_search.png" class="icon"><a href="index" style="display: inline">黄金周热门搜索</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/东方明珠_pearl-of-the-orient.png" class="icon"><a href="golden_week" style="display: inline">黄金周迁徙</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/进入_login.png" class="icon"><a href="immigration" style="display: inline">黄金周热门迁入地</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/退出_logout.png" class="icon"><a href="emigration" style="display: inline">黄金周热门迁出地</a><img src="/static/img/左1_left-one.png" class="icon"></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/建筑_building-one.png" class="icon"><a href="metropolis" style="display: inline">北上广深迁入迁出</a></li>
    </ul>
<div id="line-chart" class="chart-container" style="margin-left: 500px;display: inline-block"></div>
<iframe src="http://127.0.0.1:5000/rose_migration2" class="chart-container" style="display: inline-block; margin-left: 500px;border: transparent;height: 1000px"></iframe>

<script src="{{ url_for('static', filename='layui.js') }}"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
<script>

        // 使用ajax请求后端数据
        $.ajax({
            url: '/national_baidu_migration2', // 后端路由地址
            type: 'GET',
            dataType: 'html',
            success: function(data) {
                // 将后端返回的图表HTML代码插入到图表容器中
                $("#line-chart").html(data);
            },
            error: function() {
                alert('请求失败');
            }
        });
</script>

</body>
</html>